<template>
  <div>
    <div class="padding-lg">
      <el-button class="btn-save" @click="onSave" size="mini" type="success"
        >保存</el-button
      >
      <el-form :model="form" ref="basisForm" :rules="rules" size="mini">
        <el-form-item label="产品" label-width="120px">
          <el-select
            size="mini"
            v-model="form.parcelProduct"
            placeholder="请选择产品"
            @change="handelChange1"
          >
            <el-option
              v-for="(item, value) in parcelProductList"
              :key="value"
              :label="item"
              :value="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道" label-width="120px">
          <el-select
            size="mini"
            v-model="form.parcelChannel"
            placeholder="请选择渠道"
          >
            <el-option
              v-for="(item, value) in parcelChannelList"
              :key="value"
              :label="item"
              :value="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="API下家" label-width="120px" prop="apiService">
          <el-select
            size="mini"
            v-model="form.apiService"
            placeholder="请选择API下家"
            @change="handelChange"
          >
            <el-option
              v-for="(item, value) in apiServiceList"
              :key="value"
              :label="m(item.substring(2, item.length - 2))"
              :value="value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="padding-lg">
      <el-table
        tooltip-effect="light"
        class="table-box"
        :border="true"
        :data="queryServiceApiKeyData"
        style="width: 100%"
        size="mini"
      >
        <el-table-column
          label="desc"
          :render-header="renderHeader"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!-- <el-input v-model="scope.row.key"></el-input> -->
            <div class="text-cut">
              {{ scope.row.desc }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="Key" :render-header="renderHeader">
          <template slot-scope="scope">
            <!-- <el-input v-model="scope.row.key"></el-input> -->
            {{ scope.row.key }}
          </template>
        </el-table-column>
        <el-table-column label="Value" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.value"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";

export default {
  props: ["data"],
  data() {
    return {
      id: "",
      queryServiceApiKeyData: [],
      form: {
        parcelProduct: "",
        parcelChannel: "",
        apiService: ""
      },

      rules: {
        apiService: [
          { required: true, message: "请选择产品类型", trigger: "change" }
        ]
      },
      parcelProductList: [],
      parcelChannelList: [],
      apiServiceList: []
    };
  },
  mounted() {
    console.log("this.$store.state.edit", this.$store.state.edit);
    this.init();
    if (this.$store.state.edit.row.id) {
      const form = this.$store.state.edit.row;
      this.form.parcelProduct = form.parcelProduct
        ? form.parcelProduct.toString()
        : "";
      console.log(
        "%cthis.form.parcelProduct: ",
        "color: MidnightBlue; background: Aquamarine;",
        this.form.parcelProduct
      );
      this.form.parcelChannel = form.parcelChannel
        ? form.parcelChannel.toString()
        : "";
      console.log(
        "%cthis.form.parcelChannel: ",
        "color: MidnightBlue; background: Aquamarine;",
        this.form.parcelChannel
      );
      this.form.apiService = form.apiService;
      this.queryServiceApiKeyData = form.apiKeyValues;
    }
  },
  methods: {
    m(k) {
      return m(k);
    },
    async init() {
      const data = await ajax("initApi", {});
      console.log(
        "%cdata: ",
        "color: MidnightBlue; background: Aquamarine;",
        data
      );
      this.parcelProductList = data.data;
      console.log(
        "%cthis.parcelProductList: ",
        "color: MidnightBlue; background: Aquamarine;",
        this.parcelProductList
      );
      this.parcelChannelList = data.data2;
      this.apiServiceList = data.data3;
    },
    async queryServiceApiKey(val) {
      const formData = new FormData();
      formData.append("apiService", val);
      const data = await ajax("queryServiceApiKey", { apiService: val });
      console.log(
        "%cdata: ",
        "color: MidnightBlue; background: Aquamarine;",
        data
      );

      this.queryServiceApiKeyData = data.data;
    },
    handelChange(val) {
      console.log(
        "%cval: ",
        "color: MidnightBlue; background: Aquamarine;",
        val
      );
      this.queryServiceApiKey(val);
    },
    handelChange1(val) {
      console.log(
        "%cval: ",
        "color: MidnightBlue; background: Aquamarine;",
        val
      );
      console.log(
        "%cval: ",
        "color: MidnightBlue; background: Aquamarine;",
        typeof val
      );
    },
    renderHeader(h, { column, $index }) {
      console.log(
        "%ccolumn: ",
        "color: MidnightBlue; background: Aquamarine;",
        column
      );

      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label
          }
        })
      ]);
    },
    async onSave() {
      console.log(this.$store.state.edit.row.id);
      console.log(this.form);
      console.log(this.queryServiceApiKeyData);
      const params = {
        id: this.$store.state.edit.row.id,
        parcelProduct: this.form.parcelProduct,
        parcelChannel: this.form.parcelChannel,
        apiService: this.form.apiService,
        apiKeyValues: this.queryServiceApiKeyData
      };

      console.log("params", params);
      const data = await ajax("save", params);

      console.log("saveData", data);
      if (data.code === 200) {
        this.$notify.success({
          message: "保存成功",
          showClose: false,
          position: "bottom-right"
        });
      } else {
        this.$notify({
          message: data.message,
          type: "error",
          position: "bottom-right"
        });
      }
    },
    callafter() {
      console.log("12121");
    }
  }
};
</script>

<style scoped>
/deep/.el-select {
  width: 100%;
}

.btn-save {
  position: absolute;
  top: -20px;
  right: 20px;
}
</style>
